<template>
    <div class="fund-money-item-container">
        <div class="left">
            <div class="left-img">
                <image src="../../assets//images/myImg/shouru.png" v-if="info?.changeType == 7 || info?.changeType == 8"
                    mode="widthFix" style="width: 35px;"></image>
                <image src="../../assets//images/myImg/zhichu.png" v-if="info?.changeType == 10" mode="widthFix"
                    style="width: 35px;"></image>
                <image src="../../assets//images/myImg/d.png" v-if="info?.changeType == 4" mode="widthFix"
                    style="width: 35px;">
                </image>
                <image src="../../assets//images/myImg/j.png" v-if="info?.changeType == 5" mode="widthFix"
                    style="width: 35px;">
                </image>
            </div>
            <div class="left-text">
                <div class="left-text-row1">
                    <span v-if="info?.changeType == 7">充值</span>
                    <span v-if="info?.changeType == 10">扣款</span>
                    <span v-if="info?.changeType == 4">冻结</span>
                    <span v-if="info?.changeType == 5">解冻</span>
                    <span v-if="info?.changeType == 8">退款</span>
                    <span v-if="info?.changeType == 2">扣钱</span>
                    <span v-if="info?.changeType == 1">加钱</span>
                    <span style="margin-left: 10px;color:#15181d;font-weight: 500;">{{ info?.businessTypeName }}</span>
                </div>
                <div class="left-text-row2">交易单号：{{ info?.orderId }}</div>
                <div class="left-text-row2">订单号：{{ info?.orderNumber }}</div>
                <div class="left-text-row3">时间：{{ formatShowTimeYear(info?.changeTime) }}</div>
            </div>
        </div>
        <div class="right">
            <div class="fund-item-right-money-num" :class="{}">
                <span v-if="info?.changeType == 10 || info?.changeType == 4 || info?.changeType == 2" style="color: #ee0a24;">-</span>
                <span v-if="info?.changeType == 5 || info?.changeType == 7 || info?.changeType == 8 || info?.changeType == 1"
                    style="color: #099d13;">+</span>
                <span v-if="info?.changeType == 10 || info?.changeType == 4 || info?.changeType == 2"  style="color: #ee0a24;">{{ (info?.changeMoney /
                    100).toFixed(2) }}</span>
                <span v-if="info?.changeType == 5 || info?.changeType == 7 || info?.changeType == 8  || info?.changeType == 1"
                    style="color: #099d13;">{{ (info?.changeMoney /
                        100).toFixed(2) }}</span>
            </div>
            <div class="fund-item-right-money-text" v-if="info?.remark">{{ info?.remark }}</div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed, ref, toRefs } from 'vue'
import moment from 'moment';
const props = defineProps({
    info: Object
})
const { info } = toRefs(props)
//将时间戳转换成 时间 计算属性
const formatShowTimeYear = computed(() => {
    return (str) => {
        var formattedTime = moment.unix(str / 1000).format('YYYY-MM-DD HH:mm:ss');
        return formattedTime
    };
});// 【格式化】散场时间

</script>
<style lang="scss">
.fund-money-item-container {
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24px;

    .left {
        display: flex;
        align-items: center;

        .left-text {
            display: flex;
            flex-direction: column;
            margin-left: 20px;

            .left-text-row1 {
                font-weight: 700;
                color: #15181d;

            }

            .left-text-row2 {
                color: #858a99;
                margin-top: 5px;
            }

            .left-text-row3 {
                color: #858a99;
                margin-top: 5px;
            }
        }
    }
    .right {
        display: flex;
        flex-direction: column;
        flex: 1;
        text-align: right;
        .fund-item-right-money-num {
            color: #ee0a24;
            font-size: 28px;
        }
        .fund-item-right-money-text {
            color: #15181d;
            font-size: 24px;
        }
    }
}
</style>